import React from "react";
import { TouchableOpacity, StyleSheet } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/stores";
import { setTheme } from "@/stores/features/themeSlice";
import { Ionicons } from "@expo/vector-icons";

export const ThemeToggleButton = () => {
  const dispatch = useDispatch();
  const theme = useSelector((state: RootState) => state.theme.theme);

  return (
    <TouchableOpacity
      style={[
        styles.button,
        {
          backgroundColor: theme === "dark" ? "#333" : "#fff",
          borderWidth: 1,
          borderColor: theme === "dark" ? "#fff" : "#000",
        },
      ]}
      onPress={() => dispatch(setTheme(theme === "dark" ? "light" : "dark"))}
    >
      <Ionicons
        name={theme === "dark" ? "sunny" : "moon"}
        color={theme === "dark" ? "#fff" : "#000"}
        size={24}
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    position: "absolute",
    right: 20,
    bottom: 20,
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: "center",
    alignItems: "center",
    elevation: 5,
  },
});
